<template>
  <transition :name="mode">    <!-- transition放到组件里面一样可以实现效果，而且提高了可复用性 -->
    <ul :class="mode">
      <li v-for="item in datalist" :key="item.id">
        {{ item.nm }}
      </li>
    </ul>
  </transition>
</template>

<script>
import axios from 'axios'

export default {
  props: ['mode'],
  name: 'Sidebar',
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    // fetch('/maoyan.json')
    //  .then(res=>res.json())
    //  .then(res=>{
    //    // console.log(res.data.hot)
    //    this.datalist = res.data.hot
    //  })

    // axios.get('/maoyan.json').then(res => {
    //   // console.log(res.data.data.hot)
    //   this.datalist = res.data.data.hot
    // })

    // https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=%E5%B9%BF%E5%B7%9E&ci=20&channelId=4
    axios.get('/api/mmdb/movie/v3/list/hot.json?ct=%E5%B9%BF%E5%B7%9E&ci=20&channelId=4').then(res => {
      // console.log(res.data.data.hot)
      this.datalist = res.data.data.hot

    })
  }
}
</script>

<style scoped>  /* scoped 局部作用域，不受组件样式影响 */
ul li {
  list-style: none;
}

ul {
  width: 300px;
  height: 100vh;
  background-color: skyblue;
}

.left {
  position: fixed;
  left: 0;
  top: 20px;
  bottom: 0;
}

.right {
  position: fixed;
  right: 0;
  top: 20px;
  bottom: 0;
}

/* 左边进场动画: 随便名字-enter-active */
.left-enter-active {
  animation: left 1s;
}

/* 出场动画 */
.left-leave-active {
  animation: left 1s reverse;
}

@keyframes left {
  0% {
    /*opacity: 0;*/
    transform: translateX(-100%);
  }

  100% {
    /*opacity: 1;*/
    transform: translateX(0px);
  }
}

/* 右边进场动画 */
.right-enter-active {
  animation: right 1s;
}

/* 出场动画 */
.right-leave-active {
  animation: right 1s reverse;
}

@keyframes right {
  0% {
    /*opacity: 0;*/
    transform: translateX(100%);
  }

  100% {
    /*opacity: 1;*/
    transform: translateX(0);
  }
}
</style>
